<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>萝卜仓库首页</title>
  <link rel="stylesheet" href="/assets/bootstrap-5.3.8-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/assets/css/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
  <style>
    /* .btn_primary{
        background-color: blue;
      }
      .btn_danger{
        background-color: red;
      } */
  </style>
</head>

<body>
  <div class="card">
    <div class="card-body">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">首页</a></li>
          <li class="breadcrumb-item active" aria-current="page">图书管理</li>
        </ol>
      </nav>
      <hr>
      <div class="operate">
        <div class="search">
          <span>图书搜索：</span>
          <input type="text" class="form-control" placeholder="请输入要搜索的图书的ID">
        </div>
        <div class="operation">
          <button type="button" class="btn btn-success"><i class="bi bi-search searchBook"></i></button>
          <button type="button" class="btn btn-primary" data-bs-toggle="modal"
            data-bs-target="#exampleModal">添加</button>
        </div>
      </div>
      <table class="table">
        <!-- 表头 -->
        <thead>
          <tr>
            <th scope="col">编号</th>
            <th scope="col">书名</th>
            <th scope="col">作者</th>
            <th scope="col">出版社</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <!-- 添加图书框 -->
      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="exampleModalLabel">添加图书</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form>
                <div class="bookname">
                  <label for="">书&nbsp;&nbsp;&nbsp;名:</label>
                  <input type="text" class="form-control newBookName" placeholder="请输入书名">

                </div>
                <div class="author">
                  <label for="">作&nbsp;&nbsp;&nbsp;者:</label>
                  <input type="text" class="form-control newAuthor" placeholder="请输入作者">
                </div>
                <div class="publisher">
                  <label for="">出版社:</label>
                  <input type="text" class="form-control newPublisher" placeholder="请输入出版社">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary addBook" data-bs-toggle="modal"
                data-bs-target="#exampleModal">添加</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 修改图书的模态框 -->
  <div class="modal fade" id="exampleModa12" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">修改图书</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form>
            <div class="bookname">
              <label for="">书&nbsp;&nbsp;&nbsp;名:</label>
              <input type="text" class="form-control updateBookName" placeholder="请输入书名">

            </div>
            <div class="author">
              <label for="">作&nbsp;&nbsp;&nbsp;者:</label>
              <input type="text" class="form-control updateAuthor" placeholder="请输入作者">
            </div>
            <div class="publisher">
              <label for="">出版社:</label>
              <input type="text" class="form-control updatePublisher" placeholder="请输入出版社">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary updateBook" data-bs-toggle="modal"
            data-bs-target="#exampleModal">确定</button>
        </div>
      </div>
    </div>
  </div>
  </div>
  </div>
  <script src="./assets/js/jquery-3.7.1.min.js"></script>
  <script src="./assets/bootstrap-5.3.8-dist/js/bootstrap.min.js"></script>
  <script>
    // 获取图书
    function getBookList() {
      //清楚之前的数据
      $('tbody tr').remove();
      $.ajax({
        type: 'GET',
        url: `http://ajax-api.itheima.net/api/books`,
        success: data => {
          console.log(data);
          // 将服务器返回数据循环遍历放入页面
          // 抽出需要数据
          let bookList = data.data
          // 此处item为一条数据
          bookList.forEach(item => {
            // 遍历一条数据就创建一行放在body
            let tr = $(`<tr>
                        <td>${item.id}</td>
                        <td>${item.bookname}</td>
                        <td>${item.author}</td>
                        <td>${item.publisher}</td>
                        <td>
                          <button type="button" class="btn btn-primary">修改</button>
                          <button type="button" class="btn btn-danger" onclick="deleteBook(${item.id})">删除</button>
                        </td>
                        </tr>`)
            //创建元素

            $('tbody').append(tr)
          })
        }
      })
    }
    // 删除
    function deleteBook(id) {
      $.ajax({
        type: 'DELETE',
        url: `http://ajax-api.itheima.net/api/books/${id}`,
        success: () => {
          alert("删除成功！")
          //删除后获取图书列表
          getBookList()
        }
      })
    }
    //查询图书
    $('.searchBook').click(function () {
      let id = $('input')
      if (!id.val()) {
        getBookList()
      } else {
        $.ajax({
          type: 'GET',
          url: `http://ajax-api.itheima.net/api/books/${id.val()}`,
          success: (data) => {
            //将ID置空
            id.val('')
            let bookInfo = data.data
            alert(data.message);
            $('tbody tr').remove()
            let tr = $(`<tr>
                        <td>${bookInfo.id}</td>
                        <td>${bookInfo.bookname}</td>
                        <td>${bookInfo.author}</td>
                        <td>${bookInfo.publisher}</td>
                        <td>
                          <button type="button" class="btn btn-primary2">修改</button>
                          <button type="button" class="btn btn-danger" onclick="deleteBook(${bookInfo.id})">删除</button>
                        </td>
                        </tr>`)
            $('tbody').append(tr)


          }
        })

      }
    })

    //  添加图书
    $('.addBook').click(function () {
      let bookname = $('.newBookName')
      let author = $('.newAuthor')
      let publisher = $('.newPublisher')
      if (!(bookname.val() && author.val() && publisher.val())) {
        alert("图书信息不能为空！")
      } else {
        $.ajax({
          type: 'POST',
          url: 'http://ajax-api.itheima.net/api/books',
          data: {
            bookname: bookname.val(),
            author: author.val(),
            publisher: publisher.val()
          },
          success: () => {
            // 清空input内容
            bookname.val('')
            author.val('')
            publisher.val('')
            alert("图书添加成功！")
            // 重新获取最新图书列表
            getBookList()
          }
        })
      }
    })
    // 修改图书



    // 第二个请求是提交修改图书信息
    // 请求类型：put


    function editBook(id) {
      console.log(id);
      根据
      $.get(`http://ajax-api.itheima.net/api/books/${id}`, data => {
        // 将图书信息从返回的数据中抽出来
        letbookInfo = data.data
        console.log(bookInfo);
        // 将图书信息回录到地面
        $('.updateBookName').val(bookInfo.bookname)
        $('.updateBookAuther').val(bookInfo.bookAuther)
        $('.updateBookPublisher').val(bookInfo.Publisher)
        $('.updateBookName').click(function () {
          alert('')

          let bookname = $('.updateBookName').val()
          let author = $('.updateBookAuther').val()
          let publisher = $('.updateBookPublisher').val()
          if (!(bookname && author && publisher)) {
            alert("图书信息不能为空！")
          } else {
            $.ajax({
              type: 'PUT',
              url: `http://ajax-api.itheima.net/api/books${id}`,
              data: {
                bookname,
                author,
                publisher
              },
              success: () => {
                alert('修改成功！')
                getBookList()
              }
            })
          }
        })

      })
    }
    getBookList()
  </script>

</body>

</html>